<template>
	<view class="rank">
		<view class="rank-content">
			<navigator 
			class="rank-list" 
			:url="'/pages/rank-detail/rank-detail?item=' + encodeURIComponent(JSON.stringify(item))"
			v-for="(item,index) in rankList" 
			:key="index">
				<view class="icon">
					<image :src="item.coverImgUrl"></image>
				</view>
				<view class="song-list">
					<span class="song" v-for="(song,index) in item.rank" :key="index">
						<span class="index">{{index + 1}}</span>
						<span class="name">{{song.name}} - {{song.ar[0].name}}</span>
					</span>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rankList: []
			}
		},
		onLoad() {
			var serverUrl = this.serverUrl
			var NUMBER = [0,1,2,3,4,22,23]
			for(let i = 0;i < NUMBER.length; i++){
				uni.request({
					url: serverUrl + '/top/list?idx=' + NUMBER[i],
					method: 'GET',
					success: (res) => {
						if(res.data.code === 200){
							let list = res.data.playlist
							this.rankList.push(list)
							list.rank = res.data.playlist.tracks.slice(0,3)
						}
					}
				})
			}
		},
		methods: {
			
		}
	}
</script>

<style>
@import url("rank.css");
</style>
